<template>
    <el-dialog :close-on-click-modal="false"  ref="dialogform" title="直用药情况" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
        <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="选择查看时间">
                <el-date-picker v-model="ruleForm.datetime" type="daterange" format="yyyy-MM-dd"
                    :picker-options="pickerOptions" :picker-position="pickerPosition" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="用药记录图表">
                <Echart class="w100p" :options="lineChartOptions"></Echart>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import Echarts from '@/components/Echart/index';
export default {
    components: { Echarts },
    props: {
        echartsOption: {
            type: Array,
            default: () => {
                return []
            }
        },
        //yAxisKey:'', y轴对应的echartsOption的键值
        //xAxisKey:'', x轴对应的echartsOption的键值
        optionLabel: {
            type: Object,
            default: () => {
                return {}
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    data () {
        return {
            initEcharts: true,
            ruleForm: {},
            lineChartOptions: {
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 50,
                        end: 100
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                grid: {
                    left: 30
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) { // 格式化提示框的内容  
                        let formatter = params[0]
                        let data = formatter.data.drugs;
                        let drugInfo = []
                        if (data && data.length) {
                            data.forEach(item => {
                                drugInfo.push('<br />' + item.name)
                            })
                        }
                        return formatter.name + '<br /><br /> 水产数：' + formatter.value + '粒<br />用药记录：' + drugInfo.join();
                    },
                },
                xAxis: { type: 'category', name: '时间', data: [] },
                yAxis: { type: 'value', name: '直数', },
                series: [{ type: 'line', data: [] }],
            },
            pickerPosition: 'bottom right',
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() > Date.now(); // 禁用今天之前的时间  
                },
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    computed: {

    },
    watch: {
        dialogVisible (v) {
            v && this.initData()
        }
    },
    
    mounted () { },
    methods: {
        initData () {
            this.resetForm();
            let xAxis = [];
            let yAxis = [];
            let xAxisKey = this.optionLabel.xAxisKey;
            let yAxisKey = this.optionLabel.yAxisKey;
            this.echartsOption.forEach(item => {
                xAxis.push(item[xAxisKey] || '--');
                yAxis.push({
                    ...item,
                    value: item[yAxisKey] || 0
                });
            });
            this.lineChartOptions.xAxis.data = xAxis;
            this.lineChartOptions.series[0].data = yAxis;
        },
        //提交表单
        submitForm () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.addEditApi.then(res => {
                        this.cancel()
                    }).catch(err => {

                    })
                } else {
                    return false;
                }
            })
        },
        //重置
        resetForm () {
            this.ruleForm = {};
            this.$refs.ruleForm && this.$refs.ruleForm.resetFields()
        },
        //取消关闭
        cancel () {
            this.resetForm()
            this.$emit("closeDialog")
        },
        handleClose (done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.resetForm(); this.cancel () })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped></style>
  